Heading with Subtitle Above or Below

#css #style #html #webdev

Setting the subtitle heading is a confusing game of symatics and personal style. There must be a definitive way. Enter role="doc-subtitle"

<h1>
	<span role="doc-subtitle">subscription</span>
	CuteFruitAdmin
</h1>

As Above so Below

With some newer CSS magic (supported in all browsers) we can scale the text in realtion to the size of the parent

[role="doc-subtitle"] {
	display: block;
	color: grey;
	font-size: 4cqh;
}

Example Screenshot

attachments/Pasted image 20250228181325.png

Credit